<div class="content-area">
  <a href="javascript:history.back()">&lt;&lt;{{'CommonlyUse.back'| translate}}</a>
  <br>
  <h2>{{title}} {{'CommonlyUse.Upgrade'|translate}}</h2>
  <br>
  <form clrStepper [formGroup]="form">
      <clr-stepper-panel formGroupName="version">
        <clr-step-title>{{'CommonlyUse.Upgrade'|translate}}</clr-step-title>
        <clr-step-description></clr-step-description>
        <clr-step-content *clrIfExpanded = 'true'>
          <clr-alert [clrAlertClosable]='false' clrAlertType="danger" *ngIf="isShowChartFailed">
            <clr-alert-item>
              {{errorMessage}}
            </clr-alert-item>
          </clr-alert>
          <h4>
            {{'FederationDetail.currentVersion' | translate}}: &nbsp;&nbsp;{{version}}
          </h4>
          <clr-select-container class="no-warp">
            <label>{{'FederationDetail.upgradeVersion'| translate}}</label>
            <select clrSelect name="version" formControlName="version" required>
              <option *ngFor="let version of upgradeVersionList" [value]="version">{{version}}</option>
            </select>
          </clr-select-container>
          <div class="btn-sub">
            <button class="btn btn-primary"(click)="upgradeExchangeCluster(fedUuid, upgradeUuid, type)" [disabled]="!form.controls['version'].valid || submiting">{{'CommonlyUse.submit'|
              translate}}</button>
            <span *ngIf="submiting" class="spinner spinner-md">
                Loading...
            </span>
          </div>
        </clr-step-content>
      </clr-stepper-panel>
  </form>
</div>